<template>
	<view class="activity-page ">
		<view class="tabs-swiper mt-4 mx-3">
			<TabsSwiperVue swiperBoxHeight="calc(100vh - 300rpx)" :swiperItemClassType='1' :tabIndex="tabIndex"
				@clickTab="changeTab" @clickSwiper="chagneSwiper">
				<template #other>
					<view class="select text-default flex justify-between mt-3 pb-3">
						<view class="item">
							<uni-data-select v-model="value2" placeholder="活动类型" :localdata="range2" @change="change2"
								:clear="true"></uni-data-select>
						</view>
						<view class="item">
							<uni-data-select v-model="value3" placeholder="智能筛选" :localdata="range3" @change="change3"
								:clear="true"></uni-data-select>
						</view>
					</view>
				</template>
				<template #switerItemContent>
					<LeftRight @ToDetail="ToActivityDetail" :data="activityList"
						style="height:calc(100vh - 300rpx);overflow-y: scroll;">
					</LeftRight>
				</template>
			</TabsSwiperVue>
		</view>
	</view>

</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import LeftRight from "../../component/commonLayout/LeftRight.vue";
	import TabsSwiperVue from '../../component/commonLayout/TabsSwiper.vue';

	import request from '../../api/index.js'
	import {
		getDictData
	} from '../../common/common.js'

	const tabIndex = ref(0)
	const swiperBoxHeight = ref('')
	const customStyle = ref({
		backgroundColor: '#f5f5f5',
		borderRadius: '16rpx',
		paddingRight: '10rpx',
	})
	const value1 = ref(0)
	const value2 = ref(0)
	const value3 = ref(0)
	const range1 = []
	const range2 = ref([

	])
	const range3 = [
		// {
		// 	value: 0,
		// 	text: "智能筛选"
		// },
		{
			value: 1,
			text: "最新发布"
		},
		{
			value: 2,
			text: "时长最多"
		},
		{
			value: 3,
			text: "招募最多"
		},
	]


	const activityList = ref([])


	const changeTab = (item) => {
		console.log('item', item);
		getActivity(item.name)
		tabIndex.value = item.index
	}
	const chagneSwiper = (e) => {
		console.log("e------", e);
		getActivity(e.date)
		tabIndex.value = e.detail.current
	}
	const change1 = () => {

	}
	const change2 = (e) => {


		getActivity('', {}, e)


	}
	const change3 = (e) => {
		console.log("e--", e);
		let sort = {}
		e == 1 ? sort = {
			"beginTime": "descend"
		} : e == 2 ? sort = {
			"activityDuration": "descend"
		} : {},
		
		e == 3 ? sort =  {
			"numberRecruits": "descend"
		} : ''

		getActivity('', sort)


	}

	const getActivityTypeData = () => {
		range2.value = getDictData('DIC004')

	}



	const getActivity = (date = "", sort = {}, activityTypeInList = '') => {
		uni.showLoading({
			title: '加载中',
			mask:true
		});
		request({
			url: '/api/volunteer/activity/activity-list',
			method: 'GET',
			data: {
				formName: 'Activity',
				beginTimeStart: date,
				beginTimeEnd: date,
				activityTypeInList: activityTypeInList,
				sort: sort,
				statusInList:'1,2'
			}
		}, e => {
			if (e.success) {
				console.log('e-------------', e.data)
				activityList.value = e.data
				const length = activityList.value?.length
				swiperBoxHeight.value = (length / 2) * 400 + 'rpx';
				console.log("swiperBoxHeight.value-----------", swiperBoxHeight.value);

			} else {
				uni.showToast({
					title: '获取活动信息失败',
					icon: 'none'
				})
			}
			uni.hideLoading()
		})
	}
	const ToActivityDetail = (item) => {
		let itemData = JSON.stringify(item)
		uni.navigateTo({
			url: `/pages/activityDetail/activityDetail?data=${itemData}`
		})
	}
	onMounted(() => {
		getActivityTypeData()
		getActivity();



	})
</script>

<style lang="scss" scoped>
	.activity-page {
		width: 100%;
		height: 100vh;
		overflow: hidden;

		.select {
			border-bottom: 1rpx solid #E9E9E9;
		}


	}
</style>